<template>
    <div class="searchPage">
        <div class="search_header">
            <form @submit.stop="conmit">
                <div class="search_box">
                    <i class="iconfont iconxuanchuan_icon_sousuo"></i>
                    <input type="search"
                           placeholder="请输入关键词"
                           class="input-kw"
                           v-model=keyWord
                           @keyup.enter="conmit"
                           ref="input" ><!--@keyup.enter="toSearch"-->
                    <span class="search-cancel" @click.stop="clear">取消</span>
                </div>
            </form>

            <div class="learnIndex">
                <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
            </div>
        </div>
        <Loading  v-if="notMore"  class="empty-text-wrap" />
        <mu-load-more @load="load" id="scrollLoadMore" ref="scrollLoadMore" :loading="loading">
            <div class="hasData" v-if="List.length">
                <div class="list_box" v-if="type==1">
                    <div class="news_list" v-for="(item,index) in List" @click="toNewsDetails(item.id,item.type)"
                         :key="index">
                        <div class="news_list_box">
                            <div class="article">
                                <!--<p class="article_title">{{item.title}}</p>-->
                                <p class="article_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                                <p class="article_source" v-if="item.class_name">{{item.class_name}}</p>
                                <p class="article_source" v-if="item.class_name==''">{{sourceText}}</p>
                                <div class="article_info">
                                <span class="article_num">
                                    <img src="@as/img/eyes.png" alt="">{{item.collection_num}}人收藏</span>
                                    <span class="article_time">{{item.create_time | time}}</span>
                                </div>
                            </div>
                            <div class="article_img">
                                <img :src="item.photo" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="list_box" v-if="type==2">
                    <div class="news_list_box" v-for="(item,index) in List" @click="toAlbumDetails(item.id)"  :key="index">
                        <div class="article3">
                            <p class="article_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                            <!--<p class="article_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{keyWord}}</b>{{item.title.slice(item.title.indexOf(keyWord)+1,item.title.length)}}</p>-->
                            <div class="article_img3">
                                <img v-for="(items,indexs) in item.photo_list" v-show="indexs<3" :key="indexs"
                                     :src="items.photo_address" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                            </div>
                            <p class="article_source" v-if="item.source">{{item.source}}</p>
                            <p class="article_source" v-if="!item.source">{{sourceText}}</p>
                            <div class="article_info">
                            <span class="article_num">
                                <img src="@as/img/eyes.png" alt="">{{item.collection_num}}人收藏
                            </span>
                                <span class="article_time">{{item.create_time |time}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="type==3">
                    <div class="video_list" v-for="(item,index) in List" @click="toVideoDetails(item.id)" :key="index">
                        <div class="video_content">
                            <img :src="item.low_source" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                            <span class="video_time">{{item.video_duration}}</span>
                        </div>
                        <div class="video_info">
                            <p class="video_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                            <span class="video_num"><img src="@as/img/eyes.png" alt="">{{item.collection_num}}人看过</span>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="type==4">
                    <div class="video_list" v-for="(item,index ) in List" @click="toVideoDetails2(item)" :key="index">
                        <div class="video_content">
                            <img src="https://media.71ydj.com/FmievBD8hfJCs-lthbgPf27SvMHd#">
                            <span class="video_time">{{item.create_time |time}}</span>
                        </div>
                        <div class="video_info">
                            <p class="video_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                            <span class="video_num"><img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                        </div>
                    </div>
                </div>
                <!--音频-->
                <div class="list_box" v-if="type==5">
                    <div class="video_list" v-for="(item,index ) in List" @click="toAudioDetails(item)" :key="index">
                        <div class="video_content">
                            <img src="https://media.71ydj.com/FmievBD8hfJCs-lthbgPf27SvMHd#">
                            <span class="video_time">{{item.create_time |time}}</span>
                        </div>
                        <div class="video_info">
                            <p class="video_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                            <span class="video_num"><img src="@as/img/eyes.png" alt="">{{item.people_num}}人看过</span>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="type==6">
                    <div class="news_list" v-for="(item,index) in List" @click="toSpecialDetails(item.id,item.type)" :key="index">
                        <div class="news_list_box">
                            <div class="article">
                                <p class="article_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                                <p class="article_source" v-if="item.source">{{item.source}}</p>
                                <p class="article_source" v-if="!item.source">{{sourceText}}</p>
                                <div class="article_info">
                                <span class="article_num"><img src="@as/img/eyes.png"
                                                               alt="">{{item.people_num}}人看过</span>
                                    <span class="article_time">{{item.create_time | time}}</span>
                                </div>
                            </div>
                            <div class="article_img">
                                <img :src="item.photo" alt onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="type==7">
                    <div class="system_list" v-for="(item,index) in List" @click="toSystemDetails(item)" :key="index">
                        <p class="system_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                        <p class="system_info"><i class="iconfont iconzuzhi_icon_biaoqian"></i>制度规定类</p>
                    </div>
                </div>
                <div class="list_box" v-if="type==8">
                    <div class="meeting_list" v-for="(item,index) in List" @click="toMeetingDetails(item)" :key="index">
                        <div class="list_left">
                            <div class="img_box">
                                <span>{{item.start_time|time4}}</span>
                                <p>{{item.start_time|time5}}</p>
                            </div>
                        </div>
                        <div class="list_right">
                            <p class="meeting_title">{{item.name}}</p>
                            <p><span>{{item.start_time | time6 }}</span><span>{{item.end_time | time6}}</span></p>
                        </div>
                    </div>
                </div>
                <div class="list_box" v-if="type==9">
                    <div class="activity_list" v-for="(item,index) in List" @click="toActivityDetails(item)"
                         :key="index">
                        <p class="activity_title">{{item.title.slice(0,item.title.indexOf(keyWord))}}<b style="color:red;font-weight: normal">{{item.title.slice(item.title.indexOf(keyWord),item.title.indexOf(keyWord)+keyWord.length)}}</b>{{item.title.slice(item.title.indexOf(keyWord)+keyWord.length)}}</p>
                        <p class="activity_info">
                            <span class="activity_info_time">{{item.create_time |time}}</span>
                            <span class="activity_info_end">{{item.activity_time |time}}报名截止</span>
                            <span class="activity_info_people_num">{{item.activity_num}}人参加</span>
                        </p>
                    </div>
                </div>
            </div>
            <!--<div class="empty-data" v-else>-->
                <!--<img src="../../../../assets/img/quesheng_zanwuneirong@2x.png" alt="">-->
            <!--</div>-->
        </mu-load-more>
        <!--<div class="loading" v-if="loading">{{loaded}}</div>-->
        <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||List.length<6}">{{loaded}}</div>
    </div>
</template>

<script>
    import LyTab from "@cp/index";
    import Loading from '@/components/emptyText.vue';
    import Toast from 'muse-ui-toast';
        import { fromEvent } from "rxjs";
        import {
            map,
            filter,
            debounceTime,
            distinctUntilChanged,
        } from "rxjs/operators";

    export default {
        components: {
            LyTab,
            Loading
        },
        data() {
            return {
                keyWord:'',
                num: 10,
                p: 1,
                loading: false,
                loaded: "加载更多...",
                loadOver:false,
                notMore: false,
                method: "",
                selectedId: 0,
                bottomSelectedId: 0,
                items: [
                    {label: "新闻", type: 1},
                    {label: "相册", type: 2},
                    {label: "微视", type: 3},
                    {label: "视频", type: 4},
                    {label: "音频", type: 5},
                    {label: "专题", type: 6},
                    {label: "制度", type: 7},
                    {label: "会议", type: 8},
                    {label: "活动", type: 9}
                ],
                options: {
                    activeColor: "#333333",
                    color: "#666"
                },
                sourceText: '七一云',
                type: 1,
                List: [],
                title: ''

            }
        },
        mounted() {
            this.$progress.done();
            console.log(this.$refs.scrollLoadMore)
            console.log($(this.$refs.scrollLoadMore))
            fromEvent(this.$refs.input, "keyup")
                .pipe(
                    map(e => e.target.value),
                    filter(value => value.length >= 1&&value),
                    debounceTime(800),
                    distinctUntilChanged(()=>{this.p=1;this.notMore =false;}),
                )
                .subscribe(title =>{
                        this.$http.get("app/My/global_search", {p: this.p, page: this.num, uid: JSON.parse(Cookies.get('user_71ydj')).id, title: title, type: this.type,}).then(res => {
                            this.List = res.data;
                            if(!this.List.length){
                                this.notMore =true;
                            }
                        })
                    }
                )
        },
        methods: {
            toSearch(){
                fromEvent(this.$refs.input, "keyup")
                    .pipe(
                        map(e => e.target.value),
                        filter(value => value.length >= 1),
                        debounceTime(800),
                        distinctUntilChanged(()=>{this.p=1;this.notMore =false;}),
                    )
                    .subscribe(title =>this.$http.get("app/My/global_search", {p: this.p, page: this.num, uid: JSON.parse(Cookies.get('user_71ydj')).id, title: title, type: this.type,}).then(res => {this.List = res.data;}));
            },
            /*新闻*/
            toNewsDetails(id, type) {
                this.$router.replace({path: '/propaganda/details/newsDetails', query: {id: id, type: type}})
            },
            /*相册*/
            toAlbumDetails(id) {
                this.$router.replace({path: '/propaganda/details/albumDetails', query: {id: id}})
            },
            /*微视*/
            toVideoDetails(id) {
                this.$router.replace({path: '/propaganda/videoList/videoList', query: {id: id}})
            },
            //视频
            toVideoDetails2(item) {
                this.$router.replace({path: '/learn/videoInfo', query: {id: item.id,type:item.type}})
            },
            //音频
            toAudioDetails(item){
                this.$router.replace({path: '/learn/audioInfo', query: {id: item.id,type:item.type}})
            },
            /*专题*/
            toSpecialDetails(id,type) {
                this.$router.replace({path: '/learn/specialInfo', query: {id: id,type:type}})
            },
            /*制度*/
            toSystemDetails(item) {
                console.log(item)
                //organization/systemDetail?id=19&name=222&title=111&create_time=1569721002
                //organization/systemDetail?id=19&name=222&title=111&create_time=1569721002
                ///organization/systemDetail?id=19&name=222&title=111&create_time=1569721002&class_name=222
                this.$router.replace({path: '/organization/systemDetails', query:{
                        id:item.id,
                        name:item.name,
                        title:item.title,
                        create_time:item.create_time,
                    }})
            },
            /*活动*/
            toActivityDetails(item) {
                this.$router.replace({path: '/organization/activityDetails', query:item})
            },
            /*会议*/
            toMeetingDetails(item) {
                //?id=75&name=111&start_time=1567958400&end_time=1570118400&years=2019%2F09&day=09&w=星期一
                this.$router.replace({path: '/organization/meetingDetails', query: item})
            },
            clear() {
                this.title = '';
                this.$router.go(-1);
            },

            getTitle(e) {
                this.title = e.target.value;
            },
            handleChange(item, index) {
                console.log(this.$refs.input)
                this.type = item.type;
                this.notMore =false;
                this.p = 1;
                this.List = [];
                console.log(item,index);
                if(this.keyWord){
                    this.$http.get("app/My/global_search", {
                        p: this.p,
                        page: this.num,
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        title: this.keyWord,
                        type: this.type,
                    }).then(res => {
                        this.List = res.data;
                        console.log(this.List)
                        if(!this.List.length){
                            this.notMore =true;
                        }
                        // alert(res.data.length)
                        // this.loadOver =false;
                        // if(!res.data.length){
                        //     this.notMore =true;
                        //     this.loadOver =false;
                        //     // alert(111)
                        // }
                    })
                };
            },

            initData() {
                this.$http
                    .get("app/My/global_search", {
                        p: this.p,
                        page: this.num,
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        title: this.keyWord,
                        type: this.type,
                    })
                    .then(res => {
                        if(res.data.length){
                            this.List.push(...res.data);
                        }
                        this.loadOver =false;
                        if(this.p!=1){
                            console.log(res.data);
                            if(res.data.length){
                            }else{
                                this.loadOver =true;
                                this.loading =false;
                                this.loaded='没有更多数据了'
                                return false
                            }
                        }else {
                            if(!res.data.length){
                                // alert(111)
                                this.notMore =true;
                                this.loadOver =false;
                            }else{
                                if(res.data.length<6&&res.data.length!=0){
                                    this.loadOver =true;
                                    this.loaded='没有更多数据了'
                                }
                            }
                        }
                        // if (res.data.length < 10) {
                        //     this.loaded = "没有更多";
                        //     this.List.push(...res.data);
                        //     this.loading = true;
                        //     this.notMore = false;
                        //     return;
                        // }
                        // this.List.push(...res.data);
                        // this.loading = false;
                    });
            },
            conmit(){
                this.$refs.input.blur();
                fromEvent(this.$refs.input, "keyup")
                    .pipe(
                        map(e => e.target.value),
                        filter(value => value.length >= 1),
                        debounceTime(800),
                        distinctUntilChanged(()=>{this.p=1;this.notMore =false;}),
                    )
                    .subscribe(val =>this.$http.get("app/My/global_search", {p: this.p, page: this.num,
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        title: val, type: this.type,}).then(
                            res => {
                                this.List = res.data;
                                if(!this.List.length){
                                    this.notMore =true;
                                }
                            })
                    );
                    return false;
            },
            load() {
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.initData(this.p);
                        this.loading =false;
                    }, 1500);
                }
                // this.loading = true;
                // if (this.notMore) {
                //     clearTimeout(this.method);
                //     this.method = setTimeout(() => {
                //         this.p = this.p + 1;
                //         this.initData(this.p);
                //     }, 500);
                // }
            },
        },
    }
</script>

<style scoped>
    .searchPage{
        height: 100vh;
    }
    input[type="search"]::-webkit-search-cancel-button {
        display: none;
        -webkit-appearance: none;
    }
    .search_header{
        overflow: hidden;
    }
    .search_box i {
        z-index: 1;
        margin-left: 10px;
        font-size: 14px;
    }

    .search_box {
        font-size: 15px;
        color: #999;
    }

    .search_box input {
        width: 300px;
        height: 34px;
        background:rgba(221,221,221,.3);
        border-radius: 6px;
        border: none;
        font-size: 15px;
        color: #666666;
        line-height: 34px;
        padding-left: 30px;
        position: absolute;
    }

    .search_box {
        width: 343px;
        height: 34px;
        line-height: 34px;
        margin: 15px 16px 0;
        display: flex;
        flex-direction: row;
    }
    .search-cancel{
        position: absolute;
        right: 16px;
    }
    .list_box {
        width: 343px;
        display: inline-block;
        margin: 10px 16px 0;
    }

    /*新闻列表*/
    p {
        margin: 0;
        padding: 0;
    }

    .news_list {
        max-width: 350px;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
        display: flex;
    }

    .news_list_box {
        margin-top: 20px;
    }

    .news_list {
        width: 100%;
    }

    .news_list .news_list_box {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    /*一张图片的新闻*/
    .article {
        width: 200px;
        float: left;
    }

    .article_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .article_source {
        font-size: 12px;
        color: #999999;
        margin-top: 10px;
    }

    .article_info {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        color: #999;
    }

    .article_info .article_num {
        float: left;
    }

    .article_num img {
        width: 13px;
        height: 11px;
        display: inline-block;
        margin-right: 6px;

    }

    .article_info .article_time {
        float: right;
        margin-right: 15px;
    }

    .article_img {
        width: 130px;
        float: right;
    }

    .article_img img {
        width: 130px;
        height: 97px;
        border-radius: 4px;
    }

    /*没有图片的新闻*/
    .article2 {
        width: 360px !important;
    }

    /*3张图片*/
    .article3 {
        width: 360px !important;
        margin: 20px 0 0 0
    }

    .article_img3 {
        width: 343px;
        margin: 10px 0 0 0;
        overflow: hidden;
        display: flex;
    }

    .article_img3 img {
        width: 110px;
        height: 83px;
        border-radius: 4px;
        margin-right: 7px;
    }

    .article_img3 img:last-child {
        margin-right: 0;
    }


    /*微视*/
    .video_list {
        width: 160px;
        float: left;
        margin-bottom: 15px;
        margin-right: 15px;
    }

    .video_list:nth-child(even) {
        margin-right: 0;
    }

    .video_content {
        position: relative;

    }

    .video_list .video_content img {
        width: 160px;
        height: 112px;
        border-radius: 4px;
    }

    .video_list .video_content .video_time {
        font-size: 10px;
        color: #fff;
        position: absolute;
        bottom: 16px;
        right: 7px;
    }

    .video_info {
        font-size: 14px;
        color: #999999;
    }

    .video_info .video_title {
        font-size: 14px;
        color: #333333;
        line-height: 19px;
        max-height: 38px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin: 0;
    }

    .video_info .video_num img {
        width: 13px;
        height: 11px;
        margin-right: 6px;
    }

    /*制度*/
    .system_list {
        border-bottom: 1px solid #DDDDDD;
    }

    .system_list .system_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        margin-top: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .system_list .system_info {
        font-size: 12px;
        color: #ccc;
        margin: 20px 0;
    }

    .system_list .system_info i {
        margin-right: 5px;
    }

    /*会议*/
    .meeting_list {
        border-bottom: 1px solid #dddddd;
        display: flex;
        flex-direction: row;
        padding: 23px 0;
    }

    .meeting_list .list_left {
        width: 62px;
        height: 62px;
        background: #fff;
        box-shadow: 0px 0px 5px 0px rgba(80, 80, 80, 0.18);
        border-radius: 6px;
        text-align: center;
        margin: 0 20px 0 16px;
    }

    .meeting_list .list_left .img_box {
        background: url("../../../../assets/img/zuzhi_wode_rq@2x.png");
        background-repeat: no-repeat;
        width: 62px;
        height: 62px;
        background-size: 90%;
        background-position: center;
        text-align: center;

    }

    .meeting_list .img_box span {
        font-size: 8px;
        color: #fff;
        position: relative;
        top: -6px;
    }

    .meeting_list .img_box p {
        display: inline-block;
        color: #fff;
        font-size: 30px;
        position: relative;
        top: -17px;
    }

    .meeting_list .list_right {
        margin-top: 8px
    }

    .meeting_list .list_right .meeting_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }

    .meeting_list .list_right p {
        font-size: 12px;
        color: #999;
    }

    /*活动*/
    .activity_list {
        border-bottom: 1px solid #DDDDDD;
    }

    .activity_list .activity_title {
        max-height: 48px;
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        margin-top: 23px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .activity_list .activity_info {
        font-size: 12px;
        color: #ccc;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
    }

    .activity_list .activity_info .activity_info_end {
        margin-left: -100px;
    }

    /*.loading {*/
        /*width: 343px;*/
        /*margin: 0 16px 49px;*/
        /*font-size: 14px;*/
        /*color: #dddddd;*/
        /*clear: both;*/
        /*line-height: 61px;*/
        /*text-align: center;*/
    /*}*/
    .loading {
        width: 343px;
        margin: 0 16px ;
        font-size: 14px;
        color: #dddddd;
        clear: both;
        line-height: 20px;
        text-align: center;
    }
    .loading.notPageOne{
        margin-top: -30px;
    }
    .searchPage{
        width: 100%;
    }
    .searchPage .empty-data{
        position: relative;
        width: 100%;
        margin-top: 100px;
        height: calc(100% - 100px);
        position: relative;
        /*background-image: url("../../../../assets/img/quesheng_zanwuneirong@2x.png");*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .searchPage .empty-data img{
        display: block;
        width: 100%;
        margin: 0 auto;
    }
    .empty-text-wrap{
        width: 100%;
        height: 100%;
    }

    .mu-load-more /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    .searchPage /deep/.mu-elevation-1{
        box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
        -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
    }
</style>